<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>

<%
	/*************************************************************/
	/*	[getParam]
		param: journey
		journey는 localstorage의 req에 담겨있는 많은 경로 정보수들중
		몇번째 route 인지 알 수 있는 번호 정보가 담겨있다.*/			
	/*************************************************************/
	String journey = request.getParameter("journey");
%>

<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file = "head.jsp" %>
<link rel="stylesheet" type="text/css" href="assets/css/alarm-page-style.css" />
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.cookie.js"></script>
<title>alarm-page</title>
</head>

<body>
	<!-- 
	*************************************************************
		[form 태그]
		각 리스트 마다 입출력 되는 데이터 들을 가지고 있기 때문 페이지 전체 
		영역을 폼테그로 묵는다.
	*************************************************************
	 -->
	<form name="sr-to-ap" role="form" method="post" action="rout.jsp">
		<!-- 
		*************************************************************
			[네비게이션바]
			: 화면 상당의 네비게이션 바.
			왼 - 백 버튼
			가운데 - 페이지 타이틀
			오른 - 완료(다음 페이지로 이동)
		*************************************************************
		 -->
		<nav class="navbar navbar-fixed-top" role="navigation">
			<div class="container text-center">
				<div class="pull-left">
					<button id="back_btn" type="button" class="btn nav_btns nav_btn_back" onclick="history.back();"><i class="icon-arrow-left"></i></button>
				</div>
				<span class="page_title">알람설정</span>
				<div class="pull-right">
					<button type="submit" class="btn nav_btns">완료</button>
				</div>
			</div>
		</nav> <!--네비게이션바 끝-->
		<!-- 
		*************************************************************
			[안내 박스]
			: 선택된 경로에 대한 기본 정보들이 출력되는 박스다.
			'from', 'to', '출발시간', '도착시간', '소요시간'이 출력된다.
		*************************************************************
		 -->
		<div class="container">
			<div class="text-center sub-header-box">
				<input type="hidden" name="journey" value="<%=journey%>"/>
				<div>
					<span class="text-muted"><strong>from.</strong></span>
					<span id="start_address" class="local_name">강남역</span>
				</div>
				<div>
					<span class="text-muted"><strong>to.</strong></span>
					<span id="end_address" class="local_name">서울역</span>
				</div>
				<div>
					<span class="text-primary"><strong>출발시간</strong></span>
					<span id="departure_time" class="local_name">00:00</span>
				</div>
				<div>
					<span class="text-success"><strong>도착시간</strong></span>
					<span id="arrival_time" class="local_name">00:00</span>
				</div>
				<div>
					<span class="text-danger"><strong>소요시간</strong></span>
					<span id="duration" class="local_name">00:00</span>
				</div>
				<button id="viewmap" type="button" class="btn btn-primary">전체경로 지도보기</button>
			</div>
		</div><!--안내바 끝-->
			
		<!-- 
		*************************************************************
			[스탭리스트]
			: 경로에 대한 이동 단계를 보여주는 박스
			javascript로 html태그와 값들이 채워진다.
		*************************************************************
		 -->
		<div class="list-box panel-group">
			<!-- 스크립트로 들어간당 ^____^ 이히힛 -->
		</div>
	</form>




	<script type="text/javascript">
		/************************************************************/
		/*	[sessionstorage(req)를 localstorage(key)로]
			sessionstorage의 req에 journey번째에 있는 루트를 json현태로 변환해서
			사용할 수 있게 해준다. 그리고 localstorage이 값을 넣어 준다.		*/			
		/************************************************************/
		var key = new Date().getTime() + '' + <%=journey%>;
		var response = JSON.parse(sessionStorage["req"]);
		
		while (localStorage.length >= 10) {
			var dkey = localStorage.key(0);
			localStorage.removeItem(dkey);
		}
		
		localStorage[key] = JSON.stringify(response.routes[<%=journey.substring(13, 14)%>].legs[0]);
		var legs = JSON.parse(localStorage[key]);
	
		/************************************************************/
		/* 	[sessionstorage에 들어갈 변수 선언과 초기값]
			sessionstorage에 알람설정의 값이 얼마인지 알람이 켜져 있는지 꺼져있는지
			확인할 수 있는 값들을 선언한다. 
			al_info: 설정된 알람 시간, 거리값들 저장
			is_al: 알람 on/off 값들 저장... 알람 on = 1, 알람 off = 0 	*/
		/************************************************************/
		var al_info = new Array(legs.steps.length+1); 	// 알람 값들이 저장되는 어레이
		var is_al = new Array(legs.steps.length+1); 		// 구간 알람 턴/오프 데이터 어레이

		for (var i=0; i<legs.steps.length+1; i++) {
			if (i==0) {
				is_al[i] = 1;
			} else if (legs.steps[i-1].travel_mode == ("WALKING")) {
				is_al[i] = 0;
			} else {
				is_al[i] = 1;
			}
		}
		window.sessionStorage.setItem("is_al", is_al);
		
		
		
		
		
		
		
		/************************************************************/
		/*	[alarmDB open]
			alarmDB를 open한다. index.jsp에서 이미 alarmDB는 만들어 졌으므로
			alarm-page.jsp에서는 기존의 alarmDB를 호출해서 가져온다.			*/			
		/************************************************************/
		var alarmDB = {};
		alarmDB.webdb = {};
		alarmDB.webdb.db = null;
      	
		var dbSize = 1 * 1024 * 1024; // 5MB
		alarmDB.webdb.db = openDatabase("alarmDB", "1.0", "알람DB", dbSize);
		
		/************************************************************/
		/*	[journeyAlDB open]
			journeyAlDB를 open한다. 내 루트에 저장할 알람 데이터들을 저장하는
			공간이다.													*/			
		/************************************************************/
		var journeyAlDB = openDatabase("JourneyAlDB", "1.0", "내 루트 알람DB", dbSize);
		
		journeyAlDB.transaction(function(tx){
			tx.executeSql("CREATE TABLE IF NOT EXISTS journeyAlDB(key, is_al, al_info)");
		});
		
		journeyAlDB.itemInsert = function(is_al, al_info) {
			journeyAlDB.transaction(function(tx){
				tx.executeSql("INSERT INTO journeyAlDB(key, is_al, al_info) VALUES (?,?,?)", [localStorage.key(localStorage.length-1), is_al, al_info], function() {}, function(tx, e) {
					console.log(e.message);
				});
			});
		};
		
		journeyAlDB.itemUpdate = function(item_name, value){
			journeyAlDB.transaction(function(tx){
				tx.executeSql("UPDATE journeyAlDB set " + item_name + "=? where key=?", [value, localStorage.key(localStorage.length-1)]);
			});
		};
		
		journeyAlDB.itemDelete = function(key) {
			journeyAlDB.transaction(function(tx){
				tx.executeSql("DELETE FROM journeyAlDB WHERE key=?", [key], function() {}, function(tx, e) {
					console.log(e.message);
				});
			});
		};
		
		/************************************************************/
		/*	[journeyAlDB의 길이 관리]
			journeyAlDB의 길이가 10보다 커지면 첫번째 항목을 지워준다.			*/			
		/************************************************************/
		journeyAlDB.transaction(function(tx){
			tx.executeSql("SELECT count(*) as cnt FROM journeyAlDB", [], 
				function(tx,rs) {
					var cnt = rs.rows.item(0)['cnt'];
					if(cnt >= 10) {
						tx.executeSql("SELECT key FROM journeyAlDB", [], 
							function(tx, rs) {
								var key = rs.rows.item(0)['key'];
								journeyAlDB.itemDelete(key);
							}, function(tx, e) {
								console.log(e.message);
							}
						);
					}
				}, function(tx, e) {
					console.log(e.message);
				}
			);
		});
		
		
		
		
		/************************************************************/
		/* 	[date함수 호출]
			시간 알람의 활성화 여부를 알기 위한 date함수 호출					*/
		/************************************************************/
		var time = new Date();
		var hh = time.getHours(); // 현재 시
		var mm = time.getMinutes(); // 현재 분
		
		var dt = legs.departure_time.text.split(' ');
		var dtime = dt[1].split(':');
		var ampm = dt[0]; //출발 시간의 오전오후 변수
		var dhh = dtime[0]; // 출발 시간의 시
		var dmm = dtime[1]; // 출발 시간의 분
		if (ampm == '오후') {
			if (dhh == 12) {
				dhh = 12;
			} else {
				dhh = Number(dhh)+12;
			}
		} else if (ampm == '오전') {
			if (dhh == 12) {
				dhh = 0;
			}
		}
		
		/************************************************************/
		/* 	[function isBtnClick()]
			시간 알람이 가지는 예외들을 불류하고 처리한다.						*/
		/************************************************************/
		function isBtnClick() {
			if(hh > dhh) {
				$('#altime20btn').attr("disabled","disable");
				$('#altime20btn').removeClass('btn-primary');
				
				$('#altime15btn').attr("disabled","disable");
				$('#altime15btn').removeClass('btn-success');
				
				$('#altime10btn').attr("disabled","disable");
				$('#altime10btn').removeClass('btn-warning');
				
				$('#altime5btn').attr("disabled","disable");
				$('#altime5btn').removeClass("btn-danger");
				
				$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없는 출발시간 입니다.</span>');
				$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
				is_al[0] = 0;
			} else if(hh == dhh){
				if (mm+20 >= dmm) {
					$('#altime20btn').attr("disabled","disable");
					$('#altime20btn').removeClass("btn-primary");
					if(mm+15 >= dmm) {
						$('#altime15btn').attr("disabled","disable");
						$('#altime15btn').removeClass('btn-success');
						if(mm+10 >= dmm) {
							$('#altime10btn').attr("disabled","disable");
							$('#altime10btn').removeClass('btn-warning');
							if(mm+5 >= dmm) {
								$('#altime5btn').attr("disabled","disable");
								$('#altime5btn').removeClass("btn-danger");
								
								$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없는 출발시간 입니다.</span>');
								$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
								is_al[0] = 0;
							}
						}
					}
				}
			} else if(hh < dhh) {
				if(mm+20 >= 60) {
					if(-40 >= dmm-mm) {
						$('#altime20btn').attr("disabled","disable");
						$('#altime20btn').removeClass("btn-primary");
						if(-45 >= dmm-mm) {
							$('#altime15btn').attr("disabled","disable");
							$('#altime15btn').removeClass('btn-success');
							if(-50 >= dmm-mm) {
								$('#altime10btn').attr("disabled","disable");
								$('#altime10btn').removeClass('btn-warning');
								if(-55 >= dmm-mm) {
									$('#altime5btn').attr("disabled","disable");
									$('#altime5btn').removeClass('btn-danger');
									
									$('#alinfotxt').html('알람설정: <span class="text-warning">알람을 설정할 수 없는 출발시간 입니다.</span>');
									$('#alth_box').html('<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>');
									is_al[0] = 0;
								}
							}
						}
					}
				}
			}
			window.sessionStorage.setItem("is_al", is_al);
			journeyAlDB.itemUpdate("is_al", is_al);
		}
		
		
		
		/************************************************************/
		/* 	[function html_getAlset(i)]
			param i = step번호 0부터 step수 만큼 번호가 붙는다.
			param x = 시간이나 거리값을 받는다.							
			
			선택되는 알람 설정 값들을 html태그에 날려주고 sessionstorage의
			al_info를 업데이트 시켜준다.									*/
		/************************************************************/
		
		function html_getAlset(i, x) {
			if(i==0) {
				$('#altime'+i).html(x+"분전");
			} else {
				$('#altime'+i).html(x+"m전");
			}
			
			al_info[i] = x;
			window.sessionStorage.setItem("al_info", al_info);
			journeyAlDB.itemUpdate("al_info", al_info);
		}
		
		/************************************************************/
		/* 	[function setAlthumb(i)]
			param i = step번호 0부터 step수 만큼 번호가 붙는다.				
			
			알람 온/오프 섬네일을 컨트롤 한다. 그리고 sessionstorage의 is_al에
			그 값을 날린다.												*/
		/************************************************************/
		function setAlthumb(i) {
			$('#althumb'+ i).toggleClass("text-danger");
			$('#althumb'+ i).toggleClass("text-muted");
			if(is_al[i]==1) {
				is_al[i] = 0;
			} else {
				is_al[i] = 1;
			}
			window.sessionStorage.setItem("is_al", is_al);
			journeyAlDB.itemUpdate("is_al", is_al);
		}
		
		/************************************************************/
		/* 	[function setColhidden(i)]
			param i = step번호 0부터 step수 만큼 번호가 붙는다.				
			
			localstorage에 사용하는 루트의 steps가 WALKING이라는 travel-
			mode를 가지고 있다면 해당 step의 알람설정 버튼을 hidden시켜준다.
			
			- 사용 시간 전역변수들
			var time = new Date();
			var hh = time.getHours(); // 현재 시
			var mm = time.getMinutes(); // 현재 분
			var dt = legs.departure_time.text.split(' ');
			var dtime = dt[1].split(':');
			var ampm = dt[0]; //출발 시간의 오전오후 변수
			var dhh = dtime[0]; // 출발 시간의 시
			var dmm = dtime[1]; // 출발 시간의 분
			if (ampm == '오후') {
				dhh = Number(dhh)+12;
			}														*/
		/************************************************************/
		function setColhidden(i) {
			if(i==0) {
				if(hh > dhh) {
					$('#collapse'+i).addClass('hidden');
				} else if(hh == dhh){
					if(mm+5 >= dmm) {
						$('#collapse'+i).addClass('hidden');
					}
				} else if(hh < dhh) {
					if((mm+5-60-dmm) >= dmm) {
						$('#collapse'+i).addClass('hidden');
					}
				}
			} else if(i>0){
				if(legs.steps[i-1].travel_mode == ("WALKING")) {
					$('#collapse'+i).addClass('hidden');
				}
			}
		}

		/*************************************************************/
		/*	[function html_getAlDB()]
			alarmDB의 key 값과 value 값을 셀렉트하고 html과 섹션스토리지에 
			뿌려 준다.*/			
		/*************************************************************/
		function html_getAlDB() {
			alarmDB.webdb.db.transaction(function(tx){
				var sql = 'SELECT * FROM alarmDB';
				tx.executeSql(sql, [], function(tx, rs) {
					for (var i=0; i<rs.rows.length; i++) {
						if(rs.rows.item(i).key == "is_alarm") {
							if(rs.rows.item(i).value == "false") {
								for(var j=0; j<legs.steps.length+1; j++){
									$("a#althumb"+j).removeClass("text-danger");
									$("a#althumb"+j).addClass("text-muted");
									is_al[j] = 0;
									window.sessionStorage.setItem("is_al", is_al);
									journeyAlDB.itemUpdate("is_al", is_al);
								}
							}
						}else if(rs.rows.item(i).key == "set_time") {
							if(rs.rows.item(i).value == 5) {
								$("#altime0").html("5분전");
								al_info[0] = 5;
							} else if(rs.rows.item(i).value == 10) {
								$("#altime0").html("10분전");
								al_info[0] = 10;
							} else if(rs.rows.item(i).value == 15) {
								$("#altime0").html("15분전");
								al_info[0] = 15;
							} else if(rs.rows.item(i).value == 20) {
								$("#altime0").html("20분전");
								al_info[0] = 20;
							}
						} else if (rs.rows.item(i).key == "set_dis") {
							if(rs.rows.item(i).value == 30) {
								for(var j=1; j<legs.steps.length+1; j++) {
									if (legs.steps[j-1].travel_mode != ("WALKING")) {
										$("#altime"+j).html("30m전");
									}
									al_info[j] = 30;
								}
							} else if(rs.rows.item(i).value == 50) {
								for(var j=1; j<legs.steps.length+1; j++) {
									if (legs.steps[j-1].travel_mode != ("WALKING")) {
										$("#altime"+j).html("50m전");
									}
									al_info[j] = 50;
								}
							} else if(rs.rows.item(i).value == 100) {
								for(var j=1; j<legs.steps.length+1; j++) {
									if (legs.steps[j-1].travel_mode != ("WALKING")) {
										$("#altime"+j).html("100m전");
									}
									al_info[j] = 100;
								}
							} else if(rs.rows.item(i).value == 150) {
								for(var j=1; j<legs.steps.length+1; j++) {
									if (legs.steps[j-1].travel_mode != ("WALKING")) {
									$("#altime"+j).html("150m전");
									}
									al_info[j] = 150;
								}
							}
						}
					}
					window.sessionStorage.setItem("al_info", al_info);
					journeyAlDB.itemUpdate("al_info", al_info);
				});
			});
		}
			
		/************************************************************/
		/* 	[스탭리스트]
			html 코드에서 <div class="list-box panel-group">에 값들이
			대입된다.													
			
			travelmode가 walking일 경우 session스토리지에 저장되는 내용이
			다른 교통수단과 달라서 따로 조건을 만들어야 한다.					*/
		/************************************************************/	
		$(function(){
			var htmltxt = '';
			for (var i=0; i<legs.steps.length+1; i++) {
				htmltxt += 	'<div class="list-case">';						
				htmltxt += 		'<div class="container">';
				htmltxt +=			'<div>';								
				htmltxt +=				'<div class="panel-heading">';		
				htmltxt += 					'<div class="panel-title">';
				htmltxt += 						'<div>';
				
				/************************************************************/
				/* 	[출발지 알람]
					출발지에서 출발하기전 시간값으로 구현되는 리스트						*/
				/************************************************************/
				if (i==0) {
					htmltxt +=						'<span id="alth_box"><a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a></span>';					
					// 리스트 전체를 감싸는 a 태그
					htmltxt +=						'<a class="list-inner' + i + ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '" onclick="setColhidden(' + i + ')">';
					htmltxt +=							'<div>';
					htmltxt +=								'<span class="text-muted">Step. ' + (i+1) + ' </span>';
					// 아이콘 이프문
					if (legs.steps[i].travel_mode == ("WALKING")) {
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
					} else {
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
					}
					htmltxt +=							'</div>'; // 설정없는 div 박스 끝
					
					htmltxt +=							'<div class="loca-name">';
					// 아이콘 이프문
					if (legs.steps[i].travel_mode == ("WALKING")) {
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
					} else {
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
					}
					htmltxt +=							sessionStorage.getItem("sl") + '에서 출발';
					htmltxt +=							'</div>'; // <div class="loca-name"> 끝
					htmltxt +=							'<div>출발예정시간: <strong>' + legs.departure_time.text + '</strong></div>';
					htmltxt +=							'<div id="alinfotxt"><span>알람설정: 출발 <span id="altime' + i + '" class="text-warning">10분</span></span></div>';
					htmltxt +=						'</a>' // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
					al_info[i] = 10;
				} else { // i가 0이 아닐 때, steps에는 -1
					/************************************************************/
					/* 	[알람 온/오프 섬네일]
						알람을 온/오프상태를 표지해주는 섬네일을 조건에 따라 표시해준다.		*/
					/************************************************************/
					if (legs.steps[i-1].travel_mode != ("WALKING")) {
						htmltxt +=					'<a id="althumb' + i + '" class="alarm-thumbnail text-danger" onclick="setAlthumb(' + i + ')"><i class="fa fa-clock-o"></i></a>';	
					} else {
						htmltxt +=					'<span class="alarm-thumbnail text-muted"><i class="fa fa-circle-o"></i></span>';	
					}
					/************************************************************/
					// 리스트 전체를 감싸는 a 태그
					htmltxt +=						'<a class="list-inner' + i + ' list-style" data-toggle="collapse" data-parent="#accordion" href="#collapse' + i + '" onclick="setColhidden(' + i + ')">';
					
					/************************************************************/
					/* 	[stpes의 travel_mode 표시]
						스탭의 번호와 이동모드를 아이콘으로 표시해준다.
						
						legs.steps[i].travel_mode == ("WALKING")일 경우 아이콘의
						경로가 sessionstorage에 없기 때문에 직접 작성해 준다.				*/
					/************************************************************/
					htmltxt +=							'<div>';
					htmltxt +=								'<span class="text-muted">Step. ' + (i+1) + ' </span>';
					if (legs.steps[i-1].travel_mode == ("WALKING")) {
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
					} else {
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
					}
					htmltxt +=							'</div>';
					
					/********** 각 스탭들 내용 *********/ 
					if (legs.steps[i-1].travel_mode != ("WALKING")) { // 도보가 아닐경우 리스트
						htmltxt +=						'<div class="loca-name">';
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
						htmltxt +=							legs.steps[i-1].transit.departure_stop.name + '에서 ';
						htmltxt	+=							'<span class="icon-pos2" style="background-color:' + legs.steps[i-1].transit.line.color + '; padding:1px 4px 0px 4px; color: #ffffff"><strong>' + legs.steps[i-1].transit.line.short_name + '</strong></span>' + legs.steps[i-1].instructions + ' ';
						htmltxt +=							'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">';
						htmltxt +=							legs.steps[i-1].transit.arrival_stop.name + ' 하차 ' + legs.steps[i-1].duration.text;
						htmltxt +=						'</div>';
						htmltxt +=						'<div>출발예정시간: <strong>' + legs.steps[i-1].transit.departure_time.text + '</strong></div>';
						htmltxt +=						'<div><span>알람설정: <img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-1].transit.line.vehicle.icon + '">' + legs.steps[i-1].transit.arrival_stop.name + ' 도착 <span id="altime' + i +'" class="text-warning">100m전</span></span></div>';
					} else { // 만약 도보일 경우 리스트
						if (i==1) {
							htmltxt +=					'<div class="loca-name">';
							htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png">';
							htmltxt +=						sessionStorage.getItem("sl") + '에서 ';
							htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
							htmltxt +=						legs.steps[i-1].instructions + ' ' + legs.steps[i-1].duration.text;
							htmltxt +=					'</div>';
							htmltxt +=					'<div>출발예정시간: <strong>' + legs.departure_time.text + '</strong></div>';
							htmltxt +=					'<div><span>알람설정: <span id="altime' + i + '" class="text-warning">도보 이동시 알람을 설정할 수 없습니다.</span></span></div>';
						} else {
							htmltxt +=					'<div class="loca-name">';
							htmltxt +=						'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i-2].transit.line.vehicle.icon + '">';
							htmltxt +=						legs.steps[i-2].transit.arrival_stop.name + '에서 ';
							if (i+1 < legs.steps.length+1) {
								htmltxt +=					'<img class="icon-pos" style="height: 20px; width: 20px" src="' + legs.steps[i].transit.line.vehicle.icon + '">';
								htmltxt +=					legs.steps[i-1].instructions + ' ' + legs.steps[i-1].duration.text;
							} else { // 마지막 스탭일 경우
								htmltxt +=					'도착지 ';
								htmltxt +=					sessionStorage.getItem("el") + '까지 이동 ' + legs.steps[i-1].duration.text;
							}
							htmltxt +=					'</div>';
							htmltxt +=					'<div>출발예정시간: <strong>' + legs.steps[i-2].transit.arrival_time.text + '</strong></div>';
							htmltxt +=					'<div><span>알람설정: <span id="altime' + i +'" class="text-warning">도보 이동시 알람을 설정할 수 없습니다.</span></span></div>';
						}
					}
					al_info[i] = 100;
					htmltxt +=						'</a>'; // <a class="list-inner' + i + ' list-style" data-toggle="collapse"....> 끝
				} // i가 0이 아닌, else문 종료						
				htmltxt += 						'</div>';
				htmltxt +=					'</div>'; // <div class="panel-title"> 끝
				htmltxt += 				'</div>'; // <div class="panel-heading"> 끝	
				
				// 알람 설정 아코디언 하단 메뉴
				htmltxt +=				'<div id="collapse' + i + '" class="collapse">'; // 아코디언 메뉴.
				htmltxt +=					'<div class="panel-body row">';
				if (i==0) {
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime20btn" class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',20); return false;">20분전</button></span>';
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime15btn" class="btn btn-success albtns" onclick="html_getAlset(' + i + ',15); return false;">15분전</button></span>';
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime10btn" class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',10); return false;">10분전</button></span>';
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button id="altime5btn" class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',5); return false;">5분전</button></span>';
				} else {
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-primary albtns" onclick="html_getAlset(' + i + ',150); return false;">150m전</button></span>';
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-success albtns" onclick="html_getAlset(' + i + ',100); return false;">100m전</button></span>';
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-warning albtns" onclick="html_getAlset(' + i + ',50); return false;" >50m전</button></span>';
					htmltxt +=					'<span class="padding5 col-md-3 col-sm-3 col-xs-3"><button class="btn btn-danger albtns" onclick="html_getAlset(' + i + ',30); return false;">30m전</button></span>';
				}
				htmltxt +=					'</div>';
				htmltxt +=				'</div>';
				htmltxt +=			'</div>'; // ㅡ,.ㅡ 내가 적고도 왜 있는지 모르는 div 박스 끝
				htmltxt += 		'</div>'; // <div class="container"> 끝
				htmltxt += 	'</div>'; // <div class="list-case"> 끝
				
				//sessionStorage에 al_info 저장
				window.sessionStorage.setItem("al_info", al_info);
			}
			
			/************************************************************/
			/* 	[html에 LocalStorage에 있는 해당 내용 입력]					*/
			/************************************************************/
			$('.list-box').html(htmltxt);
			
			$('#start_address').html(legs.start_address);
			$('#end_address').html(legs.end_address);
			$('#departure_time').html(legs.departure_time.text);
			$('#arrival_time').html(legs.arrival_time.text);
			$('#duration').html(legs.duration.text);
			
			/************************************************************/
			/* 	[지도보기]	
				이동 경로를 지도에서 보여준다.									*/
			/************************************************************/
			$('#viewmap').click(function() {
				var viewmap = '';
				viewmap += 'journey.jsp';
				viewmap += '?start=';
				viewmap += legs.start_location.nb + "," + legs.start_location.ob;
				viewmap += '&end=';
				viewmap += legs.end_location.nb + "," + legs.end_location.ob;
				viewmap += '&time=';
				viewmap += <%=journey.substring(0, 10)%>;
				viewmap += '&journey=';
				viewmap += <%=journey.substring(13, 14)%>;
				location.href = viewmap;
			});
			
			
			html_getAlDB(); // 디비값들 html에 적용
			isBtnClick(); // 시간 알람에 대한 함수
			journeyAlDB.itemInsert(is_al, al_info); //journeyAlDB의 초기값
		});
			
	</script>
</body>
</html>